<template>
  <div>
    <a-modal
      title="移动至栏目"
      :visible="visible"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
    >
      <a-tree-select
        style="width: 300px"
        :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
        :treeData="treeData"
        :replaceFields="{key:'key', value: 'id' }"
        placeholder="请选择"
        treeDefaultExpandAll
        @change="changeTree"
      >
      </a-tree-select>
    </a-modal>
  </div>
</template>
<script>
import { moveToCategory, treeCategory } from '@/api/site/content'
export default {
  data () {
    return {
      visible: false,
      confirmLoading: false,
      categoryId: '',
      selectedRowKeys: [],
      treeData: []
    }
  },
  created () {
    this.treeCategory()
  },
  methods: {
    open (selectedRowKeys) {
      this.visible = true
      this.selectedRowKeys = selectedRowKeys
    },
    treeCategory () {
      treeCategory().then(response => {
        if (response.code === 0) {
          this.treeData = [response.res]
        }
      })
    },
    changeTree (value, label, extra) {
      this.categoryId = value
    },
    handleOk (e) {
      if (!this.categoryId) {
        this.$message.error('请选择栏目')
        return
      }
      moveToCategory({ contentIds: this.selectedRowKeys, categoryId: this.categoryId }).then(response => {
        if (response.code === 0) {
          this.$emit('ok')
          this.handleCancel()
          this.$message.info(response.msg)
        } else {
          this.$message.error(response.msg)
        }
      })
    },
    handleCancel (e) {
      this.visible = false
    },
    onChange (e) {}
  }
}
</script>
